@use "sass:math";

.shop-bk {
	position: absolute;
	z-index: -1;
	width: 750rpx;
	height: 200rpx;
	filter: blur(5rpx); /* 应用5像素的模糊效果 */	
}

.shop-container {
	margin-top: 160rpx;
	width: 750rpx;
	flex-grow: 1;
	background-color: white;
	border-radius: 20rpx 20rpx 0 0;
}

.shop-page {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.shop-info {
	margin: 25rpx;
	display: flex;
	flex-direction: column;
}

.shop-name {
	font-size: 40rpx;
	margin-bottom: 10rpx;
}

.shop-stars {
	$size: 22rpx;
	width: $size;
	height: $size;
	margin-right: 2rpx;
	margin-bottom: 4rpx;
}

.shop-rating {
	display: flex;
	justify-content: flex-start;
	align-items: flex-end;
	font-size: 24rpx;
	color: #ff8108;
}

.shop-rates {
	margin-left: 6rpx;
}

// .shop-work-hour {
// 	color: #858687;
// 	margin-left: 20rpx;
// }

.shop-where {
	width: 700rpx;
	display: flex;
	flex-direction: column;
}

.shop-fee, .shop-addr, .shop-work-hour {
	font-size: 24rpx;
	color: black;
	color: #858687;
}

.shop-fee {
	margin-left: 2rpx;
	margin-right: 20rpx;
}

.shop-content {
	width: 750rpx;
	flex-grow: 1;
	// background-color: pink;
	display: flex;
	flex-direction: column;
	
}

.shop-nav {
	position: relative;
	width: 750rpx;
	flex-grow: 1;
	display: flex;
	justify-content: flex-start;
	border-bottom: 1.5px solid #ebebeb;
}

.shop-nav-item {
	position: relative;
	width: 180rpx;
	height: 80rpx;
	text-align: center;
	line-height: 80rpx;
	font-size: 36rpx;	
}

.shop-cart {
	position: absolute;
	bottom: -100rpx;
}

.shop-page-under::after {
	content: "";
	position: absolute;
	// top: 50%;
	// bottom: 0;
	left: 64rpx;
	width: 50rpx;
	height: 74rpx;
	border-bottom: 6rpx solid #f8d64f;
}

.shop-content {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.dish-item {
	width: 700rpx;
	height: 200rpx;
	margin: 25rpx;
	border-radius: 20rpx;
	display: flex;
	// flex-direction: column;
}

.dish-item-pic image {
	width: 200rpx;
	height: 200rpx;
	margin-right: 25rpx;
	border-radius: 16rpx;
}

.dish-item-info {
	position: relative;
	flex-grow: 1;
	height: 100%;
	// background-color: #858687;
	display: flex;
	flex-direction: column;
}

.dish-name {
	width: 100%;
	font-size: 40rpx;
}

.dish-tags {
	width: 100%;
	display: flex;
}
.dish-tag {
	background-color: #f5f5f5;
	border-radius: 8rpx;
	padding: 4rpx;
	margin-top: 10rpx;
	margin-right: 8rpx;
	font-size: 22rpx;
}

// .dish-tag:first-child {
// 	margin-left: 20rpx;
// }

.shop-page-order {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.dish-cart-cnt image {
	$size: 44rpx;
	width: $size;
	height: $size;
}

.dish-add-to-cart {
	position: absolute;
	bottom: 0;
	width: 100%;
	// width: 700rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.dish-price {
	// margin-left: 225rpx;
	color: #ff5732;
}

.dish-cart-cnt {
	// width: 140rpx;
	display: flex;
	align-content: center;
	justify-content: space-between;
}

.dish-decline, .dish-add {
	margin: 0 24rpx;
}

.dish-intro {
	width: 400rpx;
	margin-top: 8rpx;
	font-size: 27rpx;
}

.cart-container {
	position: absolute;
	width: 750rpx;
	height: 140rpx;
	bottom: 0;
	
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #e7e7e7;
}

.cart-icon {
	$size: 120rpx;
	$w: 94;
	$h: 138;
	position: absolute;
	margin: 25rpx;
	bottom: 0;
	width: $size;
	height: math.div($size, $w) * $h;
}

.cart-text {
	margin-left: 25 + 120rpx + 25;
}

.cart-btn {
	height: 90rpx;
	margin-right: 25rpx;	
	display: flex;
	align-items: center;
	border-radius: 45rpx;
	background-color: #fecb38;
}
.cart-to-cart {
	$size: 60rpx;
	width: $size;
	height: $size;
	margin: 25rpx 20rpx 25rpx 25rpx;
}

.cart-deal {
	height: 90rpx;
	line-height: 90rpx;
	padding: 0 30rpx 0 25rpx;
	border-radius: 0 45rpx 45rpx 0;
	background-color: #ff6b01;
}